<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- 餐桌信息tab -->
      <el-tab-pane label="会员信息" name="first">
        <div id="lll_search">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-input v-model="input" placeholder="请输入会员id"></el-input>
        </div>
        <!-- 餐桌信息表格 -->
        <el-table
                :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                :cell-style="{textAlign:'center'}"
                :data="currentData" border style="width: 100%">
          <el-table-column prop="id" label="会员id"></el-table-column>
          <el-table-column prop="card" label="会员卡号"></el-table-column>
          <el-table-column prop="pwd" label="密码"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
          <el-table-column prop="zekou" label="会员折扣"></el-table-column>
          <el-table-column prop="momey" label="卡余额"></el-table-column>
          <el-table-column label="操作" width="400px">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button type="danger">挂失</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 餐桌信息分页 -->
        <div id="lll_pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="pageNum"
            :page-size="3"
            :pager-count="7"
            @current-change="changePage"
            :current-page="currentPage"
          ></el-pagination>
        </div>

        <!-- 修改框 -->
        <el-dialog title="修改餐桌信息" :visible.sync="dialogFormVisible" width="30%">
          <el-form :model="changeForm">
            <el-form-item label="会员id" :label-width="formLabelWidth">
              <el-input v-model="changeForm.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="会员卡号" :label-width="formLabelWidth">
              <el-input v-model="changeForm.card" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="会员密码:" :label-width="formLabelWidth">
              <el-input v-model="changeForm.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态:" :label-width="formLabelWidth">
              <el-select v-model="changeForm.state" placeholder="请会员卡状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="挂失" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="会员折扣:" :label-width="formLabelWidth">
              <el-input v-model="changeForm.zekou" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="卡余额:" :label-width="formLabelWidth">
              <el-input v-model="changeForm.money" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="changedHuiYuanData">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 删除框 -->
        <el-dialog
          title="删除餐桌信息"
          :visible.sync="dialogVisible"
          width="20%"
          :before-close="handleClose"
        >
          <span>确认删除吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
            <el-button type="danger" @click="dialogVisible = false">删除</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>

      <!-- 新增餐桌tab -->
      <el-tab-pane label="新增会员" name="second" id="createTable">
        <el-form :model="createForm">
          <el-form-item label="会员id" :label-width="formLabelWidth">
            <el-input v-model="createForm.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="会员卡号" :label-width="formLabelWidth">
            <el-input v-model="createForm.card" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="会员密码:" :label-width="formLabelWidth">
            <el-input v-model="createForm.pwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态:" :label-width="formLabelWidth">
            <el-select v-model="createForm.state" placeholder="请会员卡状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="挂失" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员折扣:" :label-width="formLabelWidth">
            <el-input v-model="createForm.zekou" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="卡余额:" :label-width="formLabelWidth">
            <el-input v-model="createForm.money" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :plain="true" @click="createHuiYuan">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "../../http/http";
import * as api from "../../http/api";
export default {
  name: "lll_hugl",
  // 页面数据
  data() {
    return {
      // 默认的tab
      activeName: "first",
      input: "",
      currentPage: 1,
      HuiYuanData: [],
      dialogVisible: false, //删除
      // 修改
      dialogFormVisible: false,
      // 修改会员数据form
      changeForm: {
        id: "",
        card: "",
        pwd: "",
        state: "",
        zekou: "",
        money: ""
      },
      // 新增会员form
      createForm: {
        id: "",
        card: "",
        pwd: "",
        state: "",
        zekou: "",
        money: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    // tab跳转
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    changePage(val) {
      // 当前页数
      console.log(val);
      this.currentPage = val;
    },
    // 获取后端数据方法
    getHuiYuanData() {
      axios({
        url: "http://123.57.67.148:3000/mock/40/lllHuiYuan",
        method: "get"
      }).then(res => {
        console.log("获取到了数据");
        console.log(res.data);
        this.HuiYuanData = res.data.data;
        // let studentData = res.data.data;
        console.log(this.HuiYuanData);
      });
    },
    // 修改
    handleEdit(index, item) {
      // console.log(index);
      // console.log(item);
      this.dialogFormVisible = true;
      this.changeForm.id = item.id;
      this.changeForm.card = item.card;
      this.changeForm.pwd = item.pwd;
      this.changeForm.state = item.state;
      this.changeForm.zekou = item.zekou;
      this.changeForm.money = item.momey;
    },
    // 确认修改会员数据
    changedHuiYuanData() {
      this.dialogFormVisible = false;
      console.log("确认修改会员数据");
      console.log(this.changeForm);
    },
    // 删除
    handleDelete(index, item) {
      console.log(index);
      console.log(item);
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    // 新增会员信息 提交成功
    createHuiYuan() {
      console.log(this.createForm.id);
      // 成功提示信息
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success"
      });

    // 失败提示信息
    // this.$message.error('错了哦，这是一条错误消息');

    }
  },
  computed: {
    // 当前页数据
    currentData() {
      let kaishi = (this.currentPage - 1) * 3;
      let jieshu = (this.currentPage - 1) * 3 + 3;
      return this.HuiYuanData.slice(kaishi, jieshu);
    },
    // 总数据
    pageNum() {
      return this.HuiYuanData.length;
    }
  },
  created() {
    // 获取数据
    this.getHuiYuanData();

    // 测试后端数据
    axios({
      url: api.lll_HuiYuanData,
      method: "post",
      data: {}
    }).then(res => {
      console.log("测试后端数据");
      console.log(res.data);
    });
  }
};
</script>

<style scoped lang="less">
.el-table {
  height: 600px;
}

#lll_search {
  width: 100%;
  height: 44px;
  padding-top: 25px;
  padding-bottom: 35px;
  .el-input {
    float: right;
    width: 300px;
  }
  .el-button {
    float: right;
    height: 40px;
    margin-right: 40px;
    margin-left: 40px;
  }
}

#createTable {
  .el-form {
    width: 600px;
    margin-top: 100px;
    .el-form-item {
      height: 50px;
    }
    .el-button {
      margin: 0 10px;
    }
  }
}
</style>
